import React, { useEffect, useState } from 'react';
import { BetaSchemaForm } from '@ant-design/pro-form';
import { useParams } from 'react-router-dom';
import { getApps, python, spawn } from '@/utils/api';
import Page from '@/components/Page';
import Logging from '@/components/Logging';
import { useReactive } from 'ahooks';
type DataItem = {
  name: string;
  state: string;
};
export default () => {
  let { id } = useParams();
  const state = useReactive({
    stream: [] as string[],
    modules: [] as string[],
  });
  const [app, setApp] = useState<any>([]);

  useEffect(() => {
    getApps().then((obj) => {
      setApp(obj?.[id] ?? {});
    });
  }, [id]);

  return (
    <Page title={app.name}>
      <BetaSchemaForm<DataItem>
        trigger={<a>点击我</a>}
        layoutType={'Form'}
        onFinish={async (values) => {
          python({
            program: app.program,
            args: Object.entries(values)
              .map(([key, val]) => [`--${key}`, val])
              .flat(),
            callback: (line) => {
              state.stream.push(line);
            },
          });
        }}
        columns={app?.schema ?? []}
      />
      <br />
      <Logging dataSource={state.stream} />
    </Page>
  );
};
